﻿
<!doctype html>
<html>
<head>
	<title>onyx toolbar design</title>
	<link href="../source/css/onyx.css" rel="stylesheet" type="text/css" />
	<style>
		/*
			the 'inline' class attempts to setup a left-to-right container, with vertically centered children
		*/
		.toolbar > *, .inline > * { 
			display: inline-block;
			vertical-align: middle;
		}
		.toolbar, .inline {
			white-space: nowrap;
			/*
				We want to control line-height so that vertical-align: middle 
				becomes true center. Otherwise, when line-height is in effect
				(i.e. if the actual height is less than line height), 
				user agents pad the line unevenly.
			*/
			line-height: 0;
		}
		.toolbar > *, .inline > * {
			/*
				Defeat line-height control above for children
			*/
			line-height: normal;
		}
		.toolbar .inline, .inline .inline {
			/*
				Enforce line-height 0 for an inline child of an inline (FIXME: fiddly)
			*/
			line-height: 0px;
		}
		/*
			toolbar is just an inline context with specific styling
		*/
		.toolbar {
			padding: 8px;
			/**/
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
		}
		/*
			It's useful to be able to abut toolbars in an inline context
			and not worry about varying heights.
			Generally icons are the largest elements in a toolbar, and will
			drive the height to this size.
			We can't set a min-size directly on the toolbar because it
			breaks centering (due to interation with line-height).
			For some scenarios a developer may want to override the height value.
		*/
		.stent {
			visibility: none;
			width: 0px;
			height: 34px;
		}
		/* */
		.onyx .toolbar {
			padding: 8px;
			/**/
			border: 1px solid #3A3A3A;
			background: #4C4C4C url(../images/gradient.png) repeat-x 0 bottom;
			color: white;
		}
		/* */
		button {
			/* only needed for IE */
			line-height: normal !important;
		}
		.icon {
			width: 32px;
			height: 32px;
			background-image: url(menu-icon-bookmark.png);
		}
		/* */
		/*
			for display/debug only, not part of the design 
		*/
		.big {
			font-size: 42px;
		}
		.bord {
			border: 1px solid lightblue;
		}
		.bg {
			background-color: Red;
		}
		.bg .toolbar {
			background-color: white;
		}
		.lh0 {
			line-height: 0px;
		}
		.lhn {
			line-height: normal;
		}
	</style>
</head>
<body>
	<div class="onyx">
		<label>no content</label>
		<div class="toolbar"></div>
		<br />
		<label>text only content (padding is ignored due to line height control)</label>
		<div class="toolbar">Text</div>
		<br />
		<label>div content</label>
		<div class="toolbar">
			<div>Text in Div</div>
		</div>
		<br />
		<label>input content</label>
		<div class="toolbar">
			<input class="" />
		</div>
		<br />
		<label>input content</label>
		<div class="toolbar">
			<div class="icon"></div>
		</div>
		<br />
		<label>input content</label>
		<div class="toolbar">
			<img src="menu-icon-bookmark.png" height="32"/>
		</div>
		<br />
		<label>div content with min-height on toolbar (centering improper on tested user agents)</label>
		<div class="toolbar" style="min-height: 50px;">
			<div>Text in Div</div>
		</div>
		<br />
		<label>div content with stent</label>
		<div class="toolbar">
			<div class="stent"></div>
			<div>Text in Div</div>
		</div>
		<br />
		<label>stented toolbars abutting in inline context, as long as the stent is the largest item the bars align. There should be no red color visible above or below each toolbar.</label>
		<div class="inline" style="background-color: Red;">
			<div class="toolbar">
				<div class="stent"></div>
				<div>Text in Div</div>
			</div>
			<div class="toolbar">
				<div class="stent"></div>
				<input class="" />
			</div>
			<div class="toolbar">
				<div class="stent"></div>
				<div class="icon"></div>
			</div>
			<div class="toolbar">
				<div class="stent"></div>
				<img src="menu-icon-bookmark.png" height="32"/>
			</div>
		</div>
	</div>
	<hr />
	<div class="bord toolbar">
		<div class="bord">div</div>
		<input class="bord" />
		<div class="bord icon"></div>
	</div>
	<br />
	<div class="bord toolbar big">
		<div class="bord">div</div>
		<input class="bord" />
		<div class="bord icon"></div>
	</div>
	<br />
	<div class="bord toolbar big lh0">
		<div class="bord lhn">div</div>
		<input class="bord" />
		<div class="bord icon"></div>
	</div>
	<br />
	<div class="bord toolbar big lh0">
		<div class="bord lhn">div</div>
		<input class="bord" />
	</div>
	<br />
	<br />
	<div class="toolbar bord">
		<div class="bord">div</div>
		<input class="bord" />
		<div class="bord inline">
			<div class="bord">div</div>
			<input class="bord" />
			<div class="bord icon"></div>
		</div>
		<button>Button</button>
		<div class="bord icon"></div>
		<img class="bord" src="menu-icon-bookmark.png" height="32"/>
	</div>
	<br />
	<div class="toolbar bord big">
		<div class="bord">div</div>
		<div class="bord inline">
			<div class="bord">div</div>
			<input class="bord" />
			<div class="bord icon"></div>
		</div>
		<button>Button</button>
		<div class="bord icon"></div>
		<img class="bord"src="menu-icon-bookmark.png" height="32"/>
	</div>
	<br />
	<div class="toolbar big bord">
		<div class="bord">div</div>
	</div>
	<br />
	<div class="inline bord big bg">
		<div class="toolbar bord">
			<div class="bord">div</div>
		</div>
		<div class="toolbar bord">
			<div class="icon"></div>
		</div>
		<div class="toolbar bord">
			<div class="inline">
				<div class="icon"></div>
			</div>
		</div>
		<div class="toolbar bord">
			<div class="bord">div</div>
			<input class="bord" />
			<div class="inline">
				<div class="bord">div</div>
				<input class="bord" />
				<div class="icon"></div>
			</div>
			<button>Button</button>
			<div class="icon"></div>
			<img src="menu-icon-bookmark.png" height="32"/>
		</div>
	</div>
</body>
</html>
